<template>
  <div class="search-suggestion">
    <van-cell v-for="(item, index) in sugList" :key="index" icon="search">
      <div v-html="item" @click="clickKeyWord(index)"></div>
    </van-cell>
  </div>
</template>

<script>
import { getSugList } from '@/api/search.js';

// 按需导入 防抖函数
import { debounce } from 'lodash';

export default {
  name: 'search-suggestion',
  // props: ['keyword'],
  props: {
    // 父组件 为 子组件传参的 属性
    keyword: {
      type: String, // 类型约束
      required: true, // 属性必须传值
      // 校验 父组件传递的值 的规则，如果 不合规，则返回false；否则，返回true
      validator: function (value) {
        return value.length > 0;
      },
    },
  },
  data() {
    return {
      // 搜索 建议关键字列表---------
      sugList: [],
      // 添加高亮标签的 建议关键字列表
      sugListHighLight: [],
    };
  },
  async created() {},
  methods: {
    clickKeyWord(i) {
      // 获取 被点击的 不带 span 标签的 建议关键字
      let str = this.sugList[i];
      this.$emit('setKeyword', str);
    },
    async getSugList2(k) {
      // 1.立即 查询 建议关键字 列表
      const { data: resBody } = await getSugList(k);
      // 2.正则表达式 -> 用来 (全局/忽略大小写)的 查找 关键字字符串
      const reg = new RegExp(k, 'ig'); //-> /a/ ig
      // 3.新字符串：span标签 包裹 关键字，方便高亮显示
      const newStr = `<span class="highlight">${k}</span>`;
      // 4.遍历 建议列表，将 里面的 字符串 都 根据正则替换 成新字符串
      //   并装入 数组 返回 给 sugList
      if (resBody.data.options[0] === null) {
        return;
      }
      this.sugList = resBody.data.options;
      this.sugListHighLight = resBody.data.options.map((v) =>
        v.replace(reg, newStr)
      );
    },
  },
  computed: {},
  watch: {
    // 使用 对象格式的 侦听器，侦听 同名属性 keyword 的值改变
    keyword: {
      // 处理函数：注意，首次加载组件不会执行哦!
      handler: debounce(function (str) {
        this.getSugList2(str);
      }, 1000),
      // 强制 首次加载 就立即执行 本侦听器 handler函数
      immediate: true,
    },
  },
  components: {},
};
</script>

<style lang="less" scoped>
/deep/ .highlight {
  color: red;
  font-weight: bolder;
}
</style>
